<template>
  <div class="contSty">
    <el-popover placement="bottom"
                width="320"
                trigger="hover">
      <div class="flex">
        <div class="QRCode">
          <img :src="require('@static/images/QRCode.png')"
               alt="二维码" />
          <div class="ml5">物流源公众号</div>
        </div>
        <div style="width: 70%">
          <div class="items">
            <img :src="require('@static/images/phone02.png')"
                 alt="电话" />
            <span class="aSty">4008-539-529</span>
          </div>
          <div class="items">
            <img :src="require('@static/images/letter.png')"
                 alt="邮件" />
            <span class="aSty">{{email}}</span>
            <el-tooltip content="复制邮箱"
                        placement="right"
                        effect="light">
              <i class="el-icon-copy-document icon"
                 @click="handleCopy" />
            </el-tooltip>
          </div>
        </div>
      </div>
      <icon-svg slot="reference"
                class-name="iconSty"
                icon-name="dianhua" />
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "MessageToDo",
  data () {
    return {
      email: 'support@wlyuan.com.cn'
    };
  },
  computed: {

  },
  methods: {
    handleCopy () {
      // 模拟 输入框
      var copyValueInput = document.createElement("input");
      copyValueInput.value = this.email;
      document.body.appendChild(copyValueInput);
      // 选取文本框内容 
      copyValueInput.select();
      document.execCommand("copy");
      this.$message({ type: "success", message: "复制成功" });
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(copyValueInput);
    }
  }
};
</script>
<style lang="scss" scoped>
.contSty {
  position: relative;
  margin: 0 10px;
}
.iconSty {
  height: 18px;
  width: 18px;
  cursor: pointer;
}
.flex {
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
}
.email_sty {
  height: 36px;
  padding-left: 10px;
}
.items {
  padding: 12px 0;
  display: flex;
  align-items: center;
}
.border {
  border-bottom: 1px solid lightgray;
  margin-bottom: 12px;
}
.QRCode {
  width: 34%;
  float: left;
  height: 110px;
  img {
    width: 88px;
    height: 88px;
  }
}
.ml5 {
  margin-left: 5px;
}
.aSty {
  color: rgb(242, 115, 2);
  cursor: default;
  margin-left: 10px;
}
.icon {
  margin-left: 5px;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  color: chocolate;
}
</style>
